{include file="./public/header" title="权限列表"/}
<link rel="stylesheet" type="text/css" href="__STATIC__/lib/datatables/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/lib/datatables-buttons/css/buttons.dataTables.min.css"/>
<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">

<body class="hold-transition skin-blue fixed sidebar-mini">
<div class="wrapper">

    {include file="./public/navi"/}

    <!--页面主体-->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 后台</a></li>
                <li class="active">权限列表</li>
            </ol>
        </section>
        <section class="content">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">权限列表</h3>
                    <div class="box-tools">
                        <button onclick="javascript:location.reload();" type="button"
                                class="btn btn-box-tool"><i class="fa fa-refresh"></i> 刷新
                        </button>
                        <a href="create.html" type="button" class="btn btn-box-tool"><i
                                class="fa fa-plus"></i> 新增
                        </a>
                        <button id="edit-btn" type="button" class="btn btn-box-tool"><i
                                class="fa fa-pencil"></i> 修改
                        </button>
                        <button id="delete-btn" type="button" class="btn btn-box-tool"><i
                                class="fa fa-trash-o"></i> 删除
                        </button>
                        <button type="submit" class="btn btn-box-tool"
                                onclick="document.getElementById('form').submit();">
                            <i class="fa fa-sort"></i> 排序
                        </button>
                    </div>

                </div>
                <!-- /.panel-heading -->
                <div class="box-body table-responsive">

                    <table id="table" class="table table-condensed table-striped table-hover table-bordered">
                        <thead>
                        <tr>
                            <th class="text-center">ID</th>
                            <th class="text-center">排序</th>
                            <th class="text-left">权限名称</th>
                            <th class="text-center">级别</th>
                            <th class="text-left">权限规则</th>
                            <th class="text-center">状态</th>
                            <th class="text-center">菜单</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <form id="form" action="index.html" method="post">
                            {volist name="ruleList" id="rule"}
                            <tr>
                                <td align="center">{$rule.id}</td>
                                <td align="center">
                                    <input class="form-control" name="{$rule.id}" type="text"
                                           style="width:50px; height:20px; text-align:center;"
                                           value="{$rule.sort}">
                                </td>
                                <td align="left">{eq name="rule['level']" value="2"}　　　│　　　├{/eq}
                                    {eq name="rule['level']" value="1"}　　　├{/eq}
                                    {$rule.title}
                                </td>
                                <td align="center">{$rule.level+1}级</td>
                                <td align="left">{$rule.name}</td>
                                <td align="center">
                                    <a href="javascript:void(0);" data-id="{$rule.id}" data-field="status"
                                       data-value="{$rule.status}" data-url="{:url('changeStatus', 'id='.$rule['id'])}"
                                       class='changeStatus fa {if condition=" $rule.status == 1 "}fa-check-circle text-green{else /}fa-times-circle text-red{/if}'>
                                    </a>
                                </td>
                                <td align="center">

                                    <a href="javascript:void(0);" class='fa {if condition=" $rule['ismenu'] eq 1 " }
                                    fa-check-circle text-green
                                    {else/}
                                    fa-times-circle text-gray{/if}''></a>
                                </td>
                                <td align="center">
                                    <a ruleId="{$rule.id}" onclick="add_child(this)"><i class="fa fa-plus"></i></a>&nbsp;
                                    <a ruleId="{$rule.id}" ruleName="{$rule.name}"
                                       ruleTitle="{$rule.title}" onclick="edit(this)"><i
                                            class="fa fa-pencil"></i></a>&nbsp;
                                    <a style="color: #d14750;"
                                       href="javascript:if(confirm('确定删除？'))location='{:url('delete',array('id'=>$rule['id']))}'"><i
                                            class="fa fa-times"></i></a>
                                </td>
                            </tr>
                            {/volist}

                        </form>
                        </tbody>
                    </table>
                </div>
                <div class="box-footer">
                    <div class="btn-group pull-right">
                        <button type="submit" class="btn btn-default btn-sm"
                                onclick="document.getElementById('form').submit();">排序
                        </button>
                    </div>
                </div>
            </div>
            <!-- /.panel -->
        </section>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                <h4 class="modal-title" id="myModalLabel"> 修改权限</h4></div>
            <form id="edit-form" class="form-inline" action="update.html" method="post">
                <input type="hidden" name="id">
                <table class="table table-striped table-hover table-condensed">
                    <tr>
                        <th width="20%">权限名称：</th>
                        <td><input class="form-control" type="text" name="title"></td>
                    </tr>
                    <tr>
                        <th>权限规则：</th>
                        <td>
                            <input class="form-control" type="text" name="name">
                        </td>
                    </tr>
                    <tr>
                        <th></th>
                        <td><input class="btn btn-success" type="submit" value="修改"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
{include file="public/js"/}
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="__STATIC__/lib/datatables/js/jquery.dataTables.min.js"></script>
<script src="__STATIC__/lib/datatables/js/dataTables.bootstrap.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/jszip.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/buttons.print.min.js"></script>

<script>
    // 修改菜单
    function edit(obj) {
        var ruleId = $(obj).attr('ruleId');
        var ruletitle = $(obj).attr('ruletitle');
        var ruleName = $(obj).attr('ruleName');
        $("input[name='id']").val(ruleId);
        $("input[name='title']").val(ruletitle);
        $("input[name='name']").val(ruleName);
        $('#edit').modal('show');
    }
</script>
</body>

</html>